<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page trimDirectiveWhitespaces="true" %>
<fmt:setLocale value="zh_CN"/>
<style>
table.show td input[type="text"] {
    width: 90%;
}
</style>
<div class="cg_container">
	<!--  模板table,模板中不能初始化 -->
	<table class="tab-show tmpltable" style="display: none;">
      	<tr class="tmpltr">
      		<!-- dragHandle表示可拖拽 -->
	        <td class="sort dragHandle" style="text-align: center;">1</td>
	        <!-- noshield不要提前初始化，ignore不验证 -->
	        <td class=""><input type="text" name="columnName" value="" class="required autocompleteTips noshield ignore"
	        data-tips-url="${ctxPathA }/system/codegen/tablecreate/getCols"/></td>
	        <td id="tr-1">
	        	<select name="dataType" class="required ignore dbcolumntype">
	        		<option value="number">number</option>
	        		<option value="date">date</option>
	        		<option value="clob">clob</option>
	        		<option value="blob">blob</option>
	        		<option value="timestamp">timestamp</option>
	        		<option value="varchar2">varchar2()</option>
	        		<option value="nvarchar2">nvarchar2()</option>
	        		<option value="double">double</option>
	        	</select>
	        </td>
	        <td ><input type="text" name="datasize" value=""/></td>
	        <td ><input type="text" name="default" value=""/></td>
	        <!-- noshield不要提前初始化绑定的事件需要动态绑定，ignore不验证，checkboxSwitch切换值，选中则赋值为value（没有默认为1）不选中为0 -->
	        <td ><input type="checkbox" class="checkboxSwitch noshield" name="ispk" value="1"/></td>
	        <td ><input type="checkbox" class="checkboxSwitch noshield" name="notnullable" value="1"/></td>
	        <td ><input type="text" name="remarks" value="" class="required ignore"/></td>
	        <td class="operate_icon1"><img src="${ctxPath }/images/icon/cancel.png" class="removeRow" title="删除该行"/></td>
    	</tr>
	</table>
	<!-- t改为shieldTarget，且为jQuery选择器形式,notAutoSubmit表示不自动提交, 
	data-validate-cache="off" 表示表单验证不采用缓存(默认采用)，因为列是动态添加的，如果采用新的列不会验证 -->
    <form id="tableCreateForm" action="${ctxPathA}/system/codegen/tablecreate/create" method="post" notAutoSubmit autocomplete="off">
        <div class="searchForm">
            <b><font color="red">*</font>数据库连接：</b>
			<!-- 增加样式select2_plugin，data-v表示默认值,required表示必填-->    
			<!-- 联动select,relatedTo为联动目标（jQuery选择器，本例中为id为job的select），relatedUrl为联动url，其中department={}代表department为当前select选中的值，
			主要为了参数名与select名字不一致时，也可以使用参数选择器paramSelector，paramAdapter为参数适配器，将relatedUrl返回的json（注意必须为json格式）的字段适配为
			select可使用的字段，适配器中id为option的值name为option的显示文本如果字段名本身为id和name，此属性可不写，下面的示例中可用写为paramAdapter="name=jobName"，id省略表示与默认值一致 -->
            <select name="conn" class="required select2_plugin shieldSelectRelated" relatedTo=".tablecreatetool_content" relatedUrl="${ctxPathA }/system/codegen/tablecreate/getFieldList?conn={}">
            	<option value="">===请选择===</option>
            	<option value="0">本项目库</option>
    <c:forEach var="dbset" items="${dbsets }">
    			<option value="${dbset.id }">${dbset.dbSetName }</option>
    </c:forEach>
            </select>
            <b><font color="red">*</font>表名：</b>
            <input class="required" type="text" name="tableName">
            <b><font color="red">*</font>表注释：</b>
            <input class="required" type="text" name="tableComments">
            <input class="button addNewRow" type="button" name="doSearch" value="添加行">
        </div>
        <!-- tableDnD，表示可拖拽，需要在td上添加dragHandle表明可拖拽，如果要使用onDrop方法，则tr上必须定义id -->
        <table class="tab-show addRowsTable tableDnD">
        	<col width="60">
        	<col width="">
        	<col width="">
        	<col width="">
        	<col width="">
        	<col width="45">
        	<col width="45">
        	<col width="">
        	<col width="55">
			<caption>表字段设置</caption>
			<thead>
		    <tr>
		        <th class=" taCenter">序号</th>
		        <th>列名</th>
		        <th>数据库类型</th>
		        <th>长度</th>
		        <th>默认值</th>
		    	<th>主键</th>
		    	<th>非空</th>
		    	<th>注释</th>
		    	<th class="operate_icon">操作</th>
		    </tr>
		    </thead>
			<tbody>
		    <!-- 公共字段 -->
		    <%@include file="commontr.jsp"%>
		    </tbody>
		</table>
    	<!-- 切换数据库调用不同页面 -->
		<div class="tablecreatetool_content" style="display: none;"></div>
		<div class="taCenter">
			<!-- shieldA,shieldParams为参数，paramSelector为参数选择器，data-method为提交方法 -->
			<input type="button" class="shieldA button" shieldParams="{preview:1}" paramSelector="#tableCreateForm" data-method="post"
				data-url="${ctxPathA}/system/codegen/tablecreate/preview" value="预览" data-target="#tablecreate_previewDiv"/>
	    	<input class="button " type="submit" value="提交"/>
	    	<input class="button default" type="reset" value="重置"/>
    	</div>
    	<!-- 预览区 -->
    	<div id="tablecreate_previewDiv" ></div>
    </form>
</div>
<script>
//添加行
$(".addNewRow").click(function(){
	$(".addRowsTable").find(".commontr").eq(0).before('<tr class="datatr" >' + $(".tmpltr").html().replaceAll("noshield", "").replaceAll("ignore", "") + '</tr>');
	$(".addRowsTable").find(".sort").each(function(i,n){
		var sort = i+1;
		$(this).text(sort);
		$(this).closest("tr").attr("id", "tr-"+sort);
	});
	// 这一步很关键：重新初始化tabelDnd，并移除td的拖拽动作，否则会重复加载
	$(".addRowsTable").removeClass("shieldMarked_tableDnD").find("td.dragHandle").unbind("touchstart mousedown");
	ShieldJS.core.bindHtmlAction(["tableDnD", "autocompleteTips", "checkboxSwitch"], $(".cg_container")); //加载方法
});
$(".addNewRow").click(); //默认添加1行
//移除行
$(".addRowsTable").on("click", ".removeRow", function(){
	var $this = $(this);
	ShieldJS.confirm("确认", "是否确认删除该行？", function(){
		$this.closest("tr").remove();
		$(".addRowsTable").find(".sort").each(function(i,n){
			$(this).text(i+1);
		});
	});
});
//复选框

</script>
<!-- 代码预览 -->
<link rel="stylesheet" href="//cdn.staticfile.org/highlight.js/10.0.3/styles/an-old-hope.min.css">
<script src="//cdn.staticfile.org/highlight.js/10.0.3/highlight.min.js"></script>
